<template>
  <div id="sidebar-operate">
      <div class="item" @click="logout">
          <div class="flex-row">
              <div class="icon">
                  <svg-icon width="100%" height="100%" name="dashboard" />
              </div>
              <div class="name">
                  logout
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  methods: {
    logout() {
      this.$store.dispatch('user/logout');
      this.$store.dispatch('permission/removeRoutes');
      this.$router.push('/login');
    },
  },
};
</script>

<style scoped>
#sidebar-operate {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
}
#sidebar-operate > .item {
  height: 52px;
  width: 100%;
  color: rgb(191, 203, 217);
  transition: background 0.3s;
  cursor: pointer;
  line-height: 52px;
}

#sidebar-operate > .item:hover {
  background: #263445;

}
#sidebar-operate .item .flex-row {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: color .3s;
}
#sidebar-operate .item .flex-row .name {
  margin-left: 10px;
  font-size: 16px;
}
#sidebar-operate .item > .flex-row > .icon {
  height: 16px;
  width: 16px;
  line-height: 16px;
  margin-left: 16px;
}

</style>
